<template>
	<view class="coin-record-container">
		<Nav id="nav" :bgColor="bgColor" title="交易记录" @back="back"></Nav>
		<view id="info" class="account-info flex align-center justify-between">
			<view class="flex flex-column">
				<text class="label">当前余额</text>
				<view class="flex align-center">
					<text class="unit-icon"></text>
					<text class="account-value">{{accountInfo.coin}}</text>
				</view>
			</view>
			<navigator url="/magicpages/account_charge/account_charge" class="record-link">购买
			</navigator>
		</view>
		<Tab id="tab" class="tab-wrapper" :tabs="tabs" :currentActive="currentActive" tabBarClass="tab-bar-style"
			@tabChange="tabChange"></Tab>
		<swiper class="swiper" @change="swiperChange" :current="currentActive" :style="{height:swiperHeight}">
			<swiper-item v-for="(swiperItem,index) in swiperList">
				<scroll-view scroll-y="true" class="scroll-view" v-if="swiperItem.list.length"  @scrolltolower="api(swiperItem,'/api/coin/log')">
					<view class="box-list">
						<view class="box-item flex justify-between align-center" @click="toDetail(index,item)" v-for="(item,_index) in swiperItem.list"
							:key="_index">
							<view class="flex flex-column">
								<text class="name">{{item.bill_type}}</text>
								<text class="date">{{item.create_at}}</text>
							</view>
							<view class="flex align-center">
								<text class="unit-icon-inner"></text>
								<text class="value">{{item.amount}}</text>
								<text class="iconfont1 arrow-right icon-jiantou1" v-if="index==1"></text>
							</view>
						</view>
						<ns-loading :isRotate="true" v-if="swiperItem.loading"></ns-loading>
						<view class="load-finish" v-if="swiperItem.finish">亲，已经到底了哦~</view>
					</view>
				</scroll-view>
				<view class="empty-wrapper flex justify-center align-center flex-column" v-else>
					<text class="empty-icon"></text>
					<text class="empty-text">这里什么都没有哦~</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Nav from "@/components/magic-box/magic-nav/index.vue"
	import navMixin from "@/common/js/nav.js"
	import Tab from "@/components/magic-box/magic-tab/index.vue"
	import pageApi from "@/common/js/pageApi.js"
	import account from "@/common/js/account.js"
	export default {
		mixins: [navMixin,pageApi,account],
		components: {
			Nav,
			Tab
		},
		data() {
			return {
				swiperHeight: "",
				currentActive: 0,
				tabs: [{
					name: "获得"
				}, {
					name: "回收"
				}, {
					name: "支出"
				}],
				swiperList:[{
					params:{
						page_size:10,
						type: 2,
						page: 0,
					},
					loading:false,
					list: [],
					finish: false,
				}, {
					params:{
						page_size:10,
						type: 3,
						page: 0,
					},
					loading:false,
					list: [],
					finish: false,
				}, {
					params:{
						page_size:10,
						type: 1,
						page: 0,
					},
					loading:false,
					list: [],
					finish: false,
				}],
			};
		},
		methods: {
			toDetail(index,item){
				const _item=JSON.parse(item.payload)
				if(index==1){
					uni.navigateTo({
						url:`/pages/magic-box/draw-result/recycleDetail?id=${item.id}`
					})
				}
			},
			tabChange(index) {
				if (this.currentActive == index) {
					return false
				}
				this.currentActive = index
				
			},
			//左右滚动
			swiperChange({
				detail: {
					current
				}
			}) {
				this.currentActive = current
				if(this.swiperList[this.currentActive].list.length){
					return
				}
				this.api(this.swiperList[this.currentActive],"/api/coin/logs")
			},
		
		},
		onLoad() {
			this.api(this.swiperList[0],"/api/coin/logs")
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#nav').boundingClientRect()
			query.select('#tab').boundingClientRect()
			query.select('#info').boundingClientRect()
			query.exec(res => {
				let total = res.reduce((pre, item) => {
					return pre += item.height
				}, 0)
				const window_width = uni.getSystemInfoSync().windowWidth
				const window_height = uni.getSystemInfoSync().windowHeight
				const margin_top = 67 / 750 * window_width
				this.swiperHeight = (window_height - total - margin_top) + "px"
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.coin-record-container /deep/ .tab-bar-style {
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #6185FF, #8B60FF);
		border-radius: 35rpx;
	}

	.coin-record-container {
		height: 100%;

		.account-info {
			padding: 0 25rpx;
			margin: 0 21rpx 0 19rpx;
			height: 194rpx;
			background: url("~@/static/image/account-bg.png");
			background-size: 100% 100%;
			border-radius: 10rpx;
		}

		.label {
			margin-bottom: 28rpx;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 26rpx;
			color: #FFFFFF;
		}

		.unit-icon {
			margin-right: 24rpx;
			width: 89rpx;
			height: 89rpx;
			background: url("~@/static/image/coin-icon-bg.png");
			background-size: 100% 100%;
		}

		.account-value {
			font-size: 47rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.record-link {
			width: 138rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.2);
			border: 1rpx solid rgba(255, 255, 255, 0.5);
			border-radius: 25rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 25rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.tab-wrapper {
			height: 69rpx;
			margin: 24rpx 21rpx 0 19rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
		}

		.swiper {
			margin-top: 13rpx;
			height: calc(100% - var(--status-bar-height) - 112rpx - 194rpx - 24rpx - 56rpx - 13rpx - 30rpx);

			.scroll-view {
				height: 100%;
			}

			.box-list {
				background: #FFFFFF;
				border-radius: 21rpx;
				margin: 0 28rpx;

				.box-item {
					margin: 0 28rpx;
					padding: 29rpx 0 25rpx;
					border-bottom: 1rpx solid #DADADA;

					&:last-child {
						border-bottom: none;
					}

					.name {
						font-size: 29rpx;
						line-height: 29rpx;
						font-weight: 500;
						color: #333333;
					}

					.date {
						margin-top: 22rpx;
						line-height: 22rpx;
						font-size: 21rpx;
					}

					.unit-icon-inner {
						width: 45rpx;
						height: 45rpx;
						background: url("~@/static/image/coin-icon.png");
						background-size: 100% 100%;
					}

					.value {
						font-size: 29rpx;
						font-weight: 500;
						color: #FF0036;
					}

					.arrow-right {
						margin-left: 12rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}

	}
</style>
